<!-- Build Glass Website with HTML and CSS Tutorial by Simo Edwin - Dev Ed (2021)
see: https://www.youtube.com/watch?v=O7WbVj5apxU -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Glass Dashboard</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<main class="content">
<section class="container">
<div class="dashboard">
<div class="user">
<img
src="https://randomuser.me/api/portraits/women/44.jpg"
alt=""
/>
<h3>Dagny Taggart</h3>
<p>Pro Member</p>
</div>
<div class="links">
<div class="link">
<img src="https://github.com/developedbyed/glass-website/blob/master/images/twitch.png?raw=true" alt="" />
<h2>Streams</h2>
</div>
<div class="link">
<img src="https://github.com/developedbyed/glass-website/blob/master/images/steam.png?raw=true" alt="" />
<h2>Games</h2>
</div>
<div class="link">
<img src="https://github.com/developedbyed/glass-website/blob/master/images/upcoming.png?raw=true" alt="" />
<h2>New</h2>
</div>
<div class="link">
<img src="https://github.com/developedbyed/glass-website/blob/master/images/library.png?raw=true" alt="" />
<h2>Library</h2>
</div>
</div>
<div class="pro">
<h2>Join pro for more games.</h2>
<img src="https://github.com/developedbyed/glass-website/blob/master/images/controller.png?raw=true" alt="" />
</div>
</div>
<div class="games">
<div class="status">
<h1>Active Games</h1>
<input type="text" />
</div>
<div class="cards">
<div class="card">
<img src="https://images.unsplash.com/photo-1610987630265-35804332a182?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="" />
<div class="card-info">
<h2>Assassin's Creed Valhalla</h2>
<p>PS5 Version</p>
<div class="progress"></div>
</div>
<h2 class="percentage">60%</h2>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1572936947445-4f3f519289cf?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="" />
<div class="card-info">
<h2>Sackboy: A Big Adventure</h2>
<p>PS5 Version</p>
<div class="progress"></div>
</div>
<h2 class="percentage">60%</h2>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1505925456693-124134d66749?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="" />
<div class="card-info">
<h2>Marvel's Spider-Man: Miles Morales</h2>
<p>PS5 Version</p>
<div class="progress"></div>
</div>
<h2 class="percentage">60%</h2>
</div>
</div>
</div>
</section>
</main>
<div class="circle1"></div>
<div class="circle2"></div>
</body>
</html>